<script setup>
import {onMounted, reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import CommentApi from "@/api/CommentApi.js";
import {ElMessage, ElMessageBox} from "element-plus";

const state = reactive({
  queryDto:{
    videoCode:null,
    userId:null,
    commentId:null,
    pageNum:1,
    size:10
  },
  total:0,
  commentList:[]
})
onMounted(()=>{
  getCommentList()
})
const getCommentList = ()=>{
  CommentApi.getCommentList(state.queryDto).then(res=>{
    state.commentList = res.data.data
    state.total = res.data.total
  })
}
const deleteComment = (commentId) => {

  ElMessageBox.confirm(
      '确定要删除该评论吗（同时会删除该评论下的所有回复）？',
      '删除评论',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }
  ).then(() => {
    CommentApi.deleteComment(commentId).then(res=>{
      if (!res.flag){
        ElMessage.error(res.message)
        return
      }
      ElMessage.success("删除成功")
      state.queryDto.pageNum = 1
      getCommentList()
    })
  })
}
const currentPageChange = (value)=>{
  state.queryDto.pageNum = value
  getCommentList()
}
</script>
<template>
  <el-card style="--el-card-border-radius: 8px;--el-card-padding: 10px">
    <el-form :inline="true" >
      <el-form-item >
        <el-input v-model="state.queryDto.commentId" placeholder="评论id" clearable />
      </el-form-item>
      <el-form-item >
        <el-input v-model="state.queryDto.videoCode" placeholder="视频编码" clearable />
      </el-form-item>
      <el-form-item >
        <el-input v-model="state.queryDto.userId" placeholder="用户id" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :icon="Search" @click="getCommentList">搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-table  :data="state.commentList" border style="width: 100%;margin-top: 10px"  :tree-props="{ children: 'children' }" row-key="videoCode">

    <el-table-column  align="center" prop="id" label="ID" />
    <el-table-column  align="center" prop="videoCode" label="视频编码" />
<!--    <el-table-column  align="center"  label="用户头像">-->
<!--      <template #default="scope">-->
<!--        <el-avatar :src="scope.row.user.avatar" :size="36"></el-avatar>-->
<!--      </template>-->
<!--    </el-table-column>-->
    <el-table-column  align="center" prop="user.userId" label="用户ID" />
    <el-table-column  align="center" prop="user.nickName" label="用户昵称" />
    <el-table-column  align="center" prop="content" label="评论内容" />
    <el-table-column  align="center" prop="createTime" label="评论时间" />
    <el-table-column align="center" label="操作" width="250px" >
      <template #default="scope">


            <el-button type="danger" text  icon="Delete" @click="deleteComment(scope.row.id)"/>
      </template>


    </el-table-column>
  </el-table>
  <el-pagination
      style="margin:20px auto;justify-content: center"
      small
      background
      :total="state.total"
      :default-page-size="state.queryDto.size"
      layout="prev, pager, next"
      :current-page="state.queryDto.pageNum"
      @update:current-page="currentPageChange"
  />
</template>



<style scoped lang="less">

</style>